<template>
	<!-- 结束使用 -->
	<view class="container">
		<c-navBar title="结束使用" isPerch></c-navBar>

		<view class="item flex" @click="show=true">
			<view class="title">单位</view>
			<view class="input">
				{{form.useType?form.useType:'请选择'}}
			</view>
		</view>

		<view class="item flex">
			<view class="title">结束使用时长</view>
			<input v-model="form.useValue" class="input" type="digit" placeholder="请输入" />
		</view>

		<view class="item">
			<view class="title">上传结束使用图片</view>
			<view style="margin-top: 24rpx;">
				<c-upLoadImgs :projectName='projectName' ref="uploadImg" watermark :file.sync="form.file" :maxCount="6"></c-upLoadImgs>
			</view>
		</view>


		<view class="item">
			<view class="title">说明</view>
			<textarea style="margin-top: 24rpx;" class="textarea" v-model="form.cause" placeholder="请输入" />
		</view>

		<view class="btn-box">
			<view class="btn" @click="submit">提交</view>
		</view>
		<u-picker :show="show" :columns="name=='worker'?columns1:columns" @confirm="confirm" @cancel="show=false"
			immediateChange></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					duration: '',
					file: [],
					cause: '',
					useType: '',
					useValue: ''
				},
				name: '',
				id: '',
				show: false,
				columns: [
					['小时', '次数', '台班', '工天']
				],
				columns1: [
					['小时', '工天']
				],
				projectName: ''
			}
		},
		onLoad({
			name,
			id,
			projectName
		}) {
			this.name = name;
			this.id = id;
			this.projectName = projectName
		},
		methods: {
			confirm(v) {
				this.form.useType = v.value[0]
				console.log(v, 'v');
				this.show = false
			},

			submit() {
				console.log(this.$refs.uploadImg.complete, 'this.$refs.uploadImg.complete');
				if (!this.form.useType) {
					return uni.showToast({
						icon: "none",
						title: "请输入单位"
					})
				} else if (!this.form.useValue) {
					return uni.showToast({
						icon: "none",
						title: "请输入结束使用时长"
					})
				} else if (this.form.file == 0) {
					return uni.showToast({
						icon: "none",
						title: "请上传结束使用图片"
					})
				} else if (!this.form.cause) {
					return uni.showToast({
						icon: "none",
						title: "请输入结束使用原因"
					})
				} else if (!this.$refs.uploadImg.complete) {
					return uni.showToast({
						icon: "none",
						title: "图片上传完成后再试"
					})
				}

				if (this.name == 'worker') {
					this.$api.workerTaskUpdate({
						id: this.id,
						useStatus: '4',
						endStatus: '3',
						endTime: new Date(),
						useTime: this.form.duration,
						endImage: this.form.file.toString(','),
						endMessage: this.form.cause,
						useType: this.form.useType,
						useValue: String(this.form.useValue)
					}).then(res => {
						if (res.code == 200) {
							console.log('任务结束')
							uni.navigateBack()
						}
					})
				} else {
					this.$api.machineTaskUpdate({
						id: this.id,
						useStatus: '4',
						endStatus: '3',
						endTime: new Date(),
						useTime: this.form.duration,
						endImage: this.form.file.toString(','),
						endMessage: this.form.cause,
						useType: this.form.useType,
						useValue: String(this.form.useValue)
					}).then(res => {
						if (res.code == 200) {
							console.log('任务结束')
							uni.navigateBack()
						}
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {

		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.item {
			padding: 32rpx 0;
			margin: 0rpx 32rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				text-wrap: nowrap;
			}

			.input {
				text-align: right;
				color: #999999;
			}

			input::-webkit-input-placeholder {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}



			.textarea {
				width: 94%;
				height: 200rpx;
				background: #FAFAFA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				margin-bottom: 32rpx;
				padding: 24rpx;
			}

			textarea::-webkit-input-placeholder {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}


		}
	}
</style>